<!DOCTYPE html>
<html>
  <head>
    <title>Test 1.11 for role checkbox</title>
    <link rel='stylesheet' href='../css/aria_tests.css' type='text/css' media='all'>
    <script src='../js/aria_constants.js' type='text/javascript'></script>
    <link rel='stylesheet' href='../css/aria_checkbox.css' type='text/css' media='all'>
    <script type='text/javascript'>
      function setFocus() { 
        node = document.getElementById('test');
        node.focus();
      } // end onload function 
    </script>
    <script src='../js/jquery.js'            type='text/javascript'></script>
    <script src='../js/aria_tests.js'        type='text/javascript'></script>
    <script src='../js/show_test_results.js' type='text/javascript'></script>
    <script src='results_checkbox_001_011.js' type='text/javascript'></script>
  </head>
  <body id='test_001_011' onload='setFocus()'>
    <div class='nav'>
      <ul role='navigation' aria-label='checkbox test navigation'>
        <li><a href='../index.html'>All Tests</a></li>
        <li><a href='index.html'>checkbox Tests</a></li>
      </ul>
    </div>
    <h1>Test 1.11 for role checkbox</h1>
    <p>Test ID: test_001_011</p>
    <p class='description'><strong>Description: </strong>Disabled check box that has a mixed state and uses child node for accessible name</p>
    <div id='test' tabindex='0'
      role='checkbox'
      aria-checked='mixed'
      aria-disabled='true'
      >
      Checkbox node text content
    </div>
      <h2>Accessible Name</h2>
        <p><a href='http://www.w3.org/TR/wai-aria/roles#namecalculation'>Information on accessible name calculation</a>.</p>
        <p class='name'><strong>Calculated Accesible Name: </strong><span>Checkbox node text content</span></p>
        <table class='name' border='1px' summary='Sources of Accessible Name for Widget'>
          <caption>Sources of Accessible Name for Widget</caption>
          <thead>
            <tr>
              <th>Source</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Child node text content</th>
              <td>Checkbox node text content</td>
            </tr>
          </tbody>
        </table>
    <h2>Accessibility API Mappings</h2>
    <table class='api' border='1px' summary='Accessibility API Mappings'>
      <caption>Accessibility API Mappings</caption>
      <thead>
        <th>Value</th>
        <th>MSAA</th>
        <th>IAccessible2</th>
        <th>UIA</th>
        <th>ATK</th>
        <th>MAC</th>
      </thead>
      <tbody>
        <tr>
          <th>
            Role=checkbox
          </th>
          <td>
            <ul>
            <li>ROLE_SYSTEM_CHECKBUTTON
            </ul>
          </td>
          <td>
            <ul>
            <li>Object attribute checkable='true'
            </ul>
          </td>
          <td>
            <ul>
            <li>Checkbox
            </ul>
          </td>
          <td>
            <ul>
            <li>ATK_ROLE_CHECK_BOX + object attribute checkable='true'
            </ul>
          </td>
          <td>
            <ul>
            <li>AXCheckBox
            </ul>
          </td>
        </tr>
        <tr>
          <th>
            aria-checked='mixed'<br/>(State)
          </th>
          <td>
            <ul>
            <li>Set the STATE_SYSTEM_CHECKED state
            </ul>
          </td>
          <td>
            <ul>
            <li>Expose object attribute checkable="true"
            </ul>
          </td>
          <td>
            <ul>
            <li>Expose as ToggleState property in Toggle Control Pattern
            </ul>
          </td>
          <td>
            <ul>
            <li>Expose ATK_STATE_INDETERMINATE/STATE_SYSTEM_MIXED, unless on a role of radio or menuitemradio (in those cases treat as "false")
            <li>Expose object attribute checkable="true"
            </ul>
          </td>
          <td>
            <ul>
            <li>AXValue="0.5"
            </ul>
          </td>
        </tr>
        <tr>
          <th>
            aria-disabled='true'<br/>(State)
          </th>
          <td>
            <ul>
            <li>Set STATE_SYSTEM_UNAVAILABLE
            <li>Expose STATE_SYSTEM_SENSITIVE + STATE_SYSTEM_ENABLED
            <li>Propagate to all descendants of the element with STATE_SYSTEM_FOCUSABLE
            </ul>
          </td>
          <td>
            <ul>
            <li>none
            </ul>
          </td>
          <td>
            <ul>
            <li>Set IsEnabled to "false"
            </ul>
          </td>
          <td>
            <ul>
            <li>none
            </ul>
          </td>
          <td>
            <ul>
            <li>Set AXEnabled to "false"
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
